<template>
    <div class="comment-container">
       <h3>发表评论</h3>
        <textarea placeholder="请输入要说的内容，最多120字" maxlength="120">

        </textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <ul class="comment-list">
            <li v-for="item in commentHotArr">
                <div><span>用户名:{{item.user.username}}</span><span>发表时间:{{item.ctime | dateFormat}}</span></div>
                <div class="comment-content">
                    {{item.content}}
                </div>
            </li>
            <li v-for="item in commentNormalArr">
                <div><span>用户名:{{item.user.username}}</span><span>发表时间:{{item.ctime | dateFormat}}</span></div>
                <div class="comment-content">
                    {{item.content}}
                </div>
            </li>
        </ul>
        <mt-button type="primary" size="large" @click="getmore">获取更多>>></mt-button>
    </div>
</template>
<script>
 export default {
     data(){
         return {
            commentHotArr :[],//用于存放评论的数组
            commentNormalArr :[],//用于存放评论的数组
             currentPage:1
         }
     },
     created(){
        this.getHotComment();
        this. getNormalComment();
     }
     ,
     methods:{
         getHotComment(){
             this.$http.get(`https://www.apiopen.top/satinCommentApi?id=27610708&page=${this.currentPage}`).then(result=>{
                 //console.log(result.body);
                 let resultHotComent = result.body.data.hot.list;
                 //console.log(resultHotComent);
                 this.commentHotArr = this.commentHotArr.concat(resultHotComent);
             })
         },
         getNormalComment(){
             this.$http.get(`https://www.apiopen.top/satinCommentApi?id=27610708&page=${this.currentPage}`).then(result=>{
                 //console.log(result.body);
                 let resultNormalComent = result.body.data.normal.list;
                 //console.log(resultHotComent);
                 this.commentNormalArr = this.commentNormalArr.concat(resultNormalComent);
             })
         },
         getmore(){
             this.currentPage++;
             this.getHotComment();
             this. getNormalComment();
         }
     }
 }
</script>
<style scoped lang="less">
    *{
        margin: 0;
        padding: 0;
    }
.comment-container{
    padding-bottom: 80px;
        h3{
            padding: 10px 0;
        }
    textarea{
        font-size: 14px;
    }
    ul{
        list-style: none;
        margin-bottom: 20px;
        li{
            div{
                &:first-child{
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    padding: 15px 0;
                    color: deepskyblue;
                }
                &:last-child{
                    font-size: 14px;
                }
            }
        }
    }
}
</style>